<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>APIS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jsonutil.js"></script>
    <style type="text/css">
        #title{
            width: 98%;
            font-size: 18px;
            font-weight: 600;
        }
        #resp,#desc{
            min-height: 330px;
            font-size: 16px;
            width: 98%;
            resize:none;
            overflow-y: visible;
        }
        #desc{
            min-height: 60px;
        }
        .api input[disabled], input[readonly], textarea[disabled], textarea[readonly]{
            color: #34495e;
        }
        .editable{
            position: relative;
        }
        .editable div{
            display: inline;
        }
        .edit,.certain{
            position: absolute;
            right: 15px;
            top: 5px;
            font-size: 18px;
            height: 32px;
            line-height: 32px;
        }
        .edit a,.certain a{
            color:#34495e;
            text-decoration: none;
            margin-left: 5px;
        }
        .edit:hover,.certain:hover{
            color:#1abc9c;
            cursor: pointer;
        }
        .editable .certain{
            display: none;
        }
        .search{
            text-align: right;
        }
        #search-txt{
            height: 16px;
        }
        #search-btn{
            height: 36px;
            margin-top: -10px;
        }
    </style>
    <script type="text/javascript">
        function formatJson(txt){
        }
        <#if resp?exists>
        $(function(){
            $("#resp").val('${resp}');
            $(".editable span").click(function(){
                var ele = $(this).parent();
                if(ele.hasClass("edit")){
                    $(ele).prev("input").removeAttr("disabled");
                    $(ele).prev("textarea").removeAttr("disabled");
                    $(ele).hide();
                    $(ele).next(".certain").show();
                }else{
                    $(ele).parent().find("input").attr("disabled","disabled");
                    $(ele).parent().find("textarea").attr("disabled","disabled");
                    $(ele).hide();
                    $(ele).prev(".edit").show();
                }
            });
        });
        </#if>
    </script>
</head>
<body>
<div class="search">
    <span><input type="text" placeholder="Search API doc here" id="search-txt"></span>
    <span><input type="button" id="search-btn" class="btn" value="search"></span>
</div>
<#if title?exists>
<div class="api">
    <div class="editable">
        <input type="text" id="title" value="${title}" placeholder="API name goes here" disabled >
        <div class="edit">
            <span class="fui-new-24"></span>
        </div>
        <div class="certain">
            <span class="fui-checkmark-24"></span>
            <span class="fui-cross-24"></span>
        </div>
    </div>
    <div class="editable">
        <textarea name="resp" id="resp" disabled placeholder="API response goes here"></textarea>
        <div class="edit">
            <span class="fui-new-24"></span>
        </div>
        <div class="certain">
            <span class="fui-checkmark-24"></span>
            <span class="fui-cross-24"></span>
        </div>
    </div>
    <div class="editable">
        <textarea name="resp" id="desc" disabled placeholder="Descrpition goes here">${detail}</textarea>
        <div class="edit">
            <span class="fui-new-24"></span>
        </div>
        <div class="certain">
            <span class="fui-checkmark-24"></span>
            <span class="fui-cross-24"></span>
        </div>
    </div>
</div>
<#else>
<h3>Sorry 您访问的页面可能已过期，请刷新后重试！</h3>
</#if>
</body>
</html>
